import {
  defineComponent,
  ref,
  Teleport,
} from "vue";

const VideoPanel = defineComponent({
  name: "VideoPanel",
  setup() {
    const fullScreenFlag = ref(false);
    const fullScreen = () => {
      fullScreenFlag.value = !fullScreenFlag.value;
    };
    return () => (
      <>
        <img
          onClick={fullScreen}
          class="object-fill h-96 w-128 mb-2"
          src="https://img.zcool.cn/community/015ffa554567c70000019ae919a7e2.jpg@1280w_1l_2o_100sh.jpg"
          alt=""
        />
        <Teleport to="body">
          <img
            v-show={fullScreenFlag.value}
            onClick={fullScreen}
            class="object-fill h-3/4 w-3/4 mb-2 absolute top-1/2 left-1/2 z-20 -translate-x-1/2 -translate-y-1/2"
            src="https://img.zcool.cn/community/015ffa554567c70000019ae919a7e2.jpg@1280w_1l_2o_100sh.jpg"
            alt=""
          />
        </Teleport>
      </>
    );
  },
});

export default VideoPanel;

